<template>
  <BasicModal
    :width="460"
    v-bind="$attrs"
    @register="register"
    title="还款"
    @ok="onSave"
    okText="提交"
    :showOkBtn="true"
    :showCancelBtn="true"
    :canFullscreen="false"
    :maskClosable="false"
    :centered="true"
    :destroyOnClose="true"
  >
    <div class="panel">
      <div class="item">
        <div class="label">欠款金额</div>
        <div>
          <span style="font-weight: 500; font-size: 24px; color: #666666">¥</span>
          <span style="font-weight: 500; font-size: 24px; color: #666666">{{
            state.debtAmount
          }}</span>
        </div>
      </div>

      <div class="item">
        <div class="label"><span class="required">*</span>还款金额</div>
        <div>
          <!--           :max="state.debtAmount"-->
          <a-input-number
            v-model:value="state.repaymentAmount"
            :controls="true"
            :min="0"
            :max="9999999"
            :precision="2"
            addon-after="元"
          />
        </div>
      </div>
    </div>
  </BasicModal>
  <DebtLogDetail v-if="state.record" @register="registerDebtLog" />
</template>
<script setup>
  import { defineOptions, reactive, provide, defineAsyncComponent } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { POST } from '@/api/http.js';
  import { useDrawer } from '@/components/Drawer';

  const DebtLogDetail = defineAsyncComponent(() => import('./debt-log-detail.vue'));
  const { createMessage } = useMessage();

  defineOptions({ name: 'RepaymentDialog' });

  provide('onSearch', { onSearch: () => {} });

  const emit = defineEmits(['complete']);

  const [registerDebtLog, { openDrawer: debtLogDrawer }] = useDrawer();

  const state = reactive({
    memberCode: null,
    debtAmount: 0,
    repaymentAmount: 0,
  });

  const [register, { closeModal }] = useModalInner(({ memberCode, debtAmount, record }) => {
    state.memberCode = memberCode;
    state.debtAmount = debtAmount;
    state.repaymentAmount = debtAmount;
    state.record = record || null;
  });

  async function onSave() {
    const { memberCode, repaymentAmount } = state;
    await POST('/membership/memberRepayment', { memberCode, repaymentAmount });
    createMessage.success('已还款');

    emit('complete', repaymentAmount);
    closeModal();

    // const { list } = await POST('/membership/debtsList', {
    //   currentPage: 1,
    //   pageSize: 9999,
    //   query: state.record.realName,
    //   repaymentStatus: 0,
    // });

    // const record = list.find((d) => d.memberCode === state.memberCode);

    if (state.record) {
      const repaymentAmount1 = state.record.debtAmount - repaymentAmount;
      debtLogDrawer(true, {
        record: { ...state.record, debtAmount: repaymentAmount1 < 0 ? 0 : repaymentAmount1 },
      });
    }
  }
</script>
<style lang="less" scoped>
  .panel {
    padding: 8px 16px;

    .item {
      display: flex;
      flex-direction: row;
      padding: 12px 0;
      align-items: center;

      .label {
        padding-right: 18px;
        color: #091f3d;
        font-size: 13px;
        font-weight: 400;
      }
    }
  }
</style>
